<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>form对象演示文档</title>
    <style>
      .container {
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
      }
      form.form-example {
        display: table;
        position: relative;
      }
      div.form-example {
        display: table-row;
      }
      [type="submit"] {
        position: absolute;
        right: 0%;
      }

      label,
      input {
        display: table-cell;
        margin-bottom: 10px;
      }

      label {
        padding-right: 10px;
      }
      [type="email"]:invalid {
        background-color: rgb(236, 99, 99);
      }
      [type="text"]:invalid {
        background-color: aqua;
      }
      [type="text"]:valid {
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div>
        <form
          action="../20211027/action.html"
          method="get"
          class="form-example"
          autocomplete="on"
          target="actionContent"
          name="firstForm"
          id="first"
          novalidate
          onreset="myResetConfirm();"
          onsubmit="checkOnceMore();"
        >
          <div class="form-example">
            <label for="myInputName"> 请输入名字: </label>
            <input type="text" name="myname" id="myInputName" required />
          </div>
          <div class="form-example">
            <label for="email">请输入邮箱: </label>
            <input type="email" name="email" id="email" required />
          </div>
          <div class="form-example">
            <input type="reset" value="重置!" style="text-align: center" />
          </div>
          <div class="form-example">
            <input type="submit" value="提交!" style="text-align: right" />
          </div>
        </form>
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <button type="button" onclick="myReset();">重置表单</button>
        <button type="button" onclick="mySubmit();">提交表单</button>
      </div>
      <div>
        <iframe src="" name="actionContent" frameborder="0"></iframe>
      </div>
    </div>
    <script>
      var formObj = document.forms[0];
      console.log(formObj);
      console.log(formObj.action);
      console.log(formObj.length);
      console.log(formObj.method);
      //   不要让组件的名字使用一些属性名 关键字 或者保留字等
      console.log(formObj.name);
      console.log(formObj.myname);
      console.log(formObj.myInputName);
      console.log(formObj.target);

      function myReset() {
        document.forms[0].reset();
      }
      function mySubmit() {
        document.forms[0].submit();
      }
      function myResetConfirm() {
        var flag = confirm("或许在被重置之前,我还能再抢救一下?");
        console.log(flag);
        if (!flag) {
          // 这里还可以写一些逻辑代码 用于在确认删除之前进行的操作
        }
      }
      function checkOnceMore() {
        alert(
          "在提交之前可以做一些参数确认或者是修改或者是一些其他的逻辑代码..."
        );
      }
    </script>
  </body>
</html>
